<template>
  <main>
    <el-dialog :visible="changeDiaVis" title="修改密码" width="500px" @close="publicClose">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
        <el-form-item label="新密码：" prop="newPassword">
          <el-input show-password v-model="formData.newPassword" style="width: 90%" clearable></el-input>
          <div>
            <span style="color: #9d9d9d">默认密码：aidiyan@123456</span
            ><span @click="fillPassword" style="color: #72b7ff; margin-left: 12px; cursor: pointer">填入</span>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size="mini">取 消</el-button>
        <el-button type="primary" @click="handleConfirm" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </main>
</template>

<script>
export default {
  props: {
    changeDiaVis: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {
        newPassword: '',
      },
      formRules: {
        newPassword: [{ required: true, message: '请填写', trigger: 'blur' }],
      },
    }
  },
  methods: {
    // 公共关闭
    publicClose() {
      this.$emit('update:changeDiaVis', false)
      this.$refs.formRef.resetFields()
    },
    async handleConfirm() {
      await this.$refs.formRef.validate()
      this.$emit('changeUserPass', this.formData.newPassword)
    },
    handleCancel() {
      this.publicClose()
    },
    fillPassword() {
      this.formData.newPassword = 'aidiyan@123456'
    },
  },
}
</script>

<style lang="scss" scoped></style>
